<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.ajax的创建</title>
</head>
<body>
    <button id="btnNode">发送ajax</button>
    <div id="textNode"></div>
    <h1>原来的数据</h1>

    <script>
        /*
        readyState:
           0: 未发送请求，创建了XMLHttpRequest对象
           1: 客户端和服务器建立了连接 调用了open 和 send 方法

           2: 服务器接收到了请求，但是还没有处理数据
           3: 服务器端正在处理请求的数据
           4: 处理完成 向客户端发送了响应
        响应码：
          200： ok 成功
          301/302 重定向
          403 未授权
          404 请求路径不存在
          500 服务器异常
           
        
        */
        btnNode.onclick = function() {
            // 1 创建ajax 的对象
            var xhr = new XMLHttpRequest()
            console.log("#",xhr.readyState); // 0
            // 2 发送ajax 请求
            // 2.1 准备发送
            // 发送参数直接写在url上
            xhr.open("GET","./server/a.txt",true);
            console.log("@",xhr.readyState); // 1
            // 2.2 直接发送  发送参数
            xhr.send("a=10&b=10")
            console.log("@",xhr.readyState); // 1
            // 3 得到响应解析数据
            // 3.1 进行监听操作 操作ajax的变化
            xhr.onreadystatechange = function(e) {
                console.log("x",xhr.readyState); //  2 3 4
                if(xhr.readyState === 4 && xhr.status === 200) {
                    // 获取响应数据
                    var value = xhr.responseText
                    console.log(value);
                    textNode.innerText=value;
                }


            }

        }

    </script>
    
</body>
</html>